<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
    html基础知识点:
    标题：<h1....></h1....>
    段落：<p>
    换行：br 单纯实现换行
          hr 如果还要添加分割线
    有序列表 ：ol
              li
    无序列表 ：u1
              li
    可以嵌套

    超链接：
     a
         href: 用于定义要跳转的目标资源的地址
          1.url --网站的地址
          2.相对地址：
            不以/开头，以当前文件所在路径为出发点
            ./ 表示的当前资源所在路径，可以省略不写
            ../ 表示的当前资源的上一层路径，必须写
          3.绝对路径：
            以/开头，始终以一个固定路径作为基准路径作为出发点
         
        target:用于定义目标资源的打开方式
        _blank 在新窗口中打开
        _self  在当前窗口打开    
    
    多媒体标签：    
      ——img
        scr 定义图片的路径
          1.url
          2.相对路径
          3.绝对路径
        width 宽（px）
        lang  长
        title 定义鼠标悬停提示的文字
        alt 定义图片加载失败时提示文字

      ——audio 音频
      ——video 视频
         src: 用于控制目标资源
         autoplay:用于控制打开页面时是否自动播放
         controls:用于控制是否展示控制面板
         loop:用于控制是否进行循环播放

    表格标签：
        table 整张表格
             thead 表头，可省
             tbody 表体，可省
             tfoot 表尾，可省
                 tr 表格中的一行
                   td 行中的一个单元格
                   th 自带加粗居中效果的td 
                rowspen ="数" 单元格跨列
                colspen = "数" 单元格跨行

    表单标签,可以实现让用户在界面上输入各种信息并提交的一种标签.
        form  表单标签 开始头
            action 用于定义信息提交的服务器的地址
            methon 用于定义信息的提交方式
                get  数据会缀到url后,以?作为参数开始的标识,多个参数用&隔开
                post 数据会通过请求体发送,不会在缀到url后(推荐，较安全)
         input (插入数据口)主要的表单项标签,可以用于定义表单项
                name 用于定义提交的参数名
                type 用于定义表单项类型
                    text 文本框
                    passworld 密码框
                    submit  提交按钮
                    reset  重置按钮
                value 属性在input 是输入框的默认显示文本的意思
                其他 ：是用来指定选项的值，当用户提交内容后，会在后台获取这个value值

     css 设置样式
          通过元素的style属性进行设置
          style ="样式名 ：样式值；样式名：样式值;... ..."
    
    块元素：自己独占一行的元素，块元素的CSS样式的宽，高等等 往往都是生效小
        div
    行内元素：不会自己独占一行元素，行内的CSS样式的宽，高等等 往往都是生效小
        span            
  

-->

    <h1>下大雨</h1>
    <h2>要求</h2>
     <o1>
        <li>收衣服</li>
        <ul>
            <li>jjj</li>
            <li>hhh</li>
        </ul>
        <li>kkkk</li>
     </o1>
   <hr>
<!-- 超链接-->
   <a href="https://www.baidu.com/" target="_blank">百度</a>
   <br>
   <!--相对路径 -->
   <a href="jjjj.html" target="_self">相对地址</a>
   <br> 
   <a href="../REVIEW/a/111.html" target="_blank">相对路径(其他位置)</a>
   <br>
   <!--绝对路径 -->
   <a href="/REVIEW/jjjj.html" target="_self">绝对路径</a>
   <hr>
   <!--多媒体显示 -->
   <img src="img/截图.png" width="300px" lang="200px" title="照片" alt="显示失败"/>
   <br>
   <img src="/REVIEW/img/截图.png" width="600px" title="剑星" alt="显示失败"  />
   <br>

   <audio src="img/截图.png" autoplay="autoplay" controls="controls" loop="loop"></audio>
   <br>
   <video sre="img/截图.png"autoplay="autoplay" controls="controls" loop="loop" width="400px" ></video>
   <hr>
  <!--单元格标签-->
   <h3 style="text-align: center;">员工技能竞赛评分表</h3>
       <table border="1px" style="width: 400px;margin: 0px auto">
        <tr>
            <td>排名</td>
            <td>姓名</td>
            <td>分数</td>
            <td>备注</td>
        </tr>
        <tr>
            <td>1</td>
            <td>小明</td>
            <td>100</td>
            <td rowspan="6">
                前三名升职加薪
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李小东</td></td>
            <td>99</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王小虎</td>
            <td>98</td>
        </tr>
        <tr>
            <th> 平均数</th>
            <th colspan="2"> 88</th>
        </tr>
         <tr>
            <th>总人数</th>
            <th colspan="2">3</th>
        </tr>
        
       </table>
    
       <hr>
       <form action="http://www.baidu.com" methon="get">
        用户名 <input type="text" name="username" />
        <br>
        密码 <input type="password" name="password"/>
        <br>
        <input type="submit" value="登录"/>
        <input type="reset" value="重置"/><!-- value 输入框的默认显示文本-->

          <hr>
           --单行文本框--
           <br>
            个性签名 :<input type=" text" name="singal"/>
        
            <br>
            --单选框 -radio --
            <br>
            你的性别是：
            <input type="radio" name="sex" value="male" />男
            <input type="radio" name="sex" value="female" checked/>女
            <!--设置checked="checked"属性设置默认被选中的radio-->

            <br>
            --复选框 -checkbox--
            <br>
            <input type="checkbox" name="team" value="Brazil"/>巴西
            <input type="checkbox" name="team" value="German" checked/>德国
            <input type="checkbox" name="team" value="France"/>法国
            <input type="checkbox" name="team" value="China" checked="checked"/>中国
            <input type="checkbox" name="team" value="Italian"/>意大利
            
            <br>
            --下拉框-select- option-
            <br>
            你最喜欢的运动是：
            <select name ="Interesting">
            <option value="swiming">游泳</option>
            <option value="running">跑步</option>
            <option value="shooting" selected>射击</option>
            <option value="skating">溜冰</option>
            <!-- selected  有默认指定的意思-->
            </select>

            <br>
            --按钮-button--
            <br>
            <input type="button" value="普通按钮"/>
            <input type="reset" value="重置按钮"/>
            <input type="submit" value="提交按钮"/>
            
            <br>
            --隐藏域-hidden--
            <br>
            <input type="hidden" name="userId" value="2233"/>
            <br>
            --多行文本框--
            <br>
            自我介绍：<textarea name="desc"></textarea>
            <br>
            --文件标签--
            <br>
            头像：<input type="file" name="file"/>
    </form>



       <hr>
       <div style ="width :500px; height: 400px;background-color: chartreuse;">
        <div style=" width: 400px; height: 100px;background-color: beige;margin: 10px auto;">
            <span style="color: blueviolet;">页面开头部分</span>
        </div>
        <div style=" width: 400px; height: 100px;background-color:blueviolet;margin: 10px auto;">
            <span style="color:beige;">页面中间部分</span>
        </div>
        <div style="width: 400px; height: 100px;background-color: burlywood;margin: 10px auto;">
            <span style="color: blueviolet;">页面结尾部分</span>
        </div> 
    </div>
</body>
</html>